<template>
  <div class="container">
    <div class="mainCon">
      <el-row class="topSection boxBorder">
        <i
          class="icon iconfont iconfanhui1 fl"
          style="margin-top: 5px"
          v-if="historyRecords"
          @click="goBack"
        ></i>
        <div class="topBox">
          <!-- <div class=""> -->
          <el-select v-model="projectId" filterable placeholder="暂无关联项目">
            <el-option
              v-for="(item, index) of projects"
              :key="index"
              :label="item.name"
              :value="item.code"
              @click.native="
                changeProject(item.code, item.name, item.projectStatus)
              "
            ></el-option>
          </el-select>
          <span class="startStatus noStart" v-show="projectStatus == '未开工'"
            >未开工</span
          >
          <span class="startStatus" v-show="projectStatus == '已开工'"
            >已开工</span
          >
          <span class="startStatus startStop" v-show="projectStatus == '已停工'"
            >已停工</span
          >
          <span class="startStatus StartOver" v-show="projectStatus == '已竣工'"
            >已竣工</span
          >
          <el-link
            style="float: right; margin-top: 5px"
            type="primary"
            v-if="isSamllProject && !historyRecords"
            @click="goHistory"
            v-sdc
            class="fontBtn"
            >历史记录</el-link
          >
          <!-- </div> -->
        </div>
      </el-row>
      <div v-if="!isSamllProject || historyRecords">
        <BaseInfo
          ref="BaseInfo"
          :isShowUpdate="isShowUpdate"
          :info="info"
          :projectId="projectId"
          :projectName="projectName"
        />
        <InstranceRecord
          ref="InstranceRecord"
          style="margin: 15px 0"
          :projectId="projectId"
        />
        <DelayRecord :projectId="projectId" />
      </div>
      <div v-else class="smallPro">
        <div class="smallProBox">
          <img
            :src="require('@/assets/smallProject.png')"
            alt=""
            width="65px"
            height="73px"
          />
          <div style="margin-left: 28px">
            <p>无需缴纳工伤保险</p>
            <p>根据小项目管理规则，无需缴纳工伤保险</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import InstranceRecord from './instranceRecord'
import DelayRecord from './projectDelay'
import BaseInfo from './baseInfo'
export default {
  name: 'EsInsurance',
  components: {
    BaseInfo,
    InstranceRecord,
    DelayRecord,
  },
  data() {
    return {
      // dialogFormVisible: false,
      //表格数据
      tableList: [],
      projects: [],
      projectId: '',
      projectName: '',
      info: null,
      projectStatus: '', //开工状态
      isShowAdd: '',
      isShowUpdate: '',
      isSamllProject: false,
      historyRecords: false, //历史记录
      userType: '', //判断用户类型
    }
  },
  activated: function () {
    // this.projectId = this.$route.query.projectId;
    // this.$refs.InstranceRecord.getRecordInfo();
  },
  created() {
    this.$store.state.activeMenu = '/home/EsInsurance/EsInsurance'
    this.projectId = this.$route.query.projectId
    this.projectName = this.$route.query.projectName
    this.userType = this.$store.state.userType
    if (typeof this.projectId === 'undefined') {
      this.getProjects()
    } else {
      this.getProjects2()
    }
    this.isShowAdd =
      this.$store.state.buttonLimitsArr.indexOf('insurance:add') > -1
    this.isShowUpdate =
      this.$store.state.buttonLimitsArr.indexOf('insurance:update') > -1
  },
  methods: {
    /**
     * @name: 查询工伤保险信息
     * @param { id } 项目id
     * @Author: luoyong
     */
    getDetail(projectId) {
      this.axios({
        method: 'post',
        url: 'api-e/cs/ins/expand/inslistforproject',
        data: {
          projectId,
        },
      })
        .then((response) => {
          if (!response.data.false) {
            this.info = response.data.result
          } else {
            this.info = null
            this.$message({
              message: resp.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.info = null
        })
    },
    changeProject(id, projectName, projectStatus) {
      this.info = null
      this.projectId = id
      this.projectName = projectName
      this.projectStatus = projectStatus
      this.getDetail(id)
    },
    /**
     * @name: 获取项目列表 如有项目展示第一个项目的数据，反之前往项目申请页面申报项目
     * @param {type}
     * @Author: luoyong
     */
    getProjects() {
      this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/current/projects',
        data: {},
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            this.projects = resp.data.result
            if (this.projects.length > 0) {
              this.projectStatus = this.projects[0].projectStatus
              this.projectId = this.projects[0].code
              this.projectName = this.projects[0].name
              // 小项目规则  项目端调用
              if (
                this.userType == 'PROJECT_ADMINISTRATOR' ||
                this.userType == 'LABOR_ADMINISTRATOR'
              ) {
                this.getSamllProject(this.projectId)
              }
            } else {
              this.$alert('您还未加入项目请前往项目申请页面申报项目', '', {
                confirmButtonText: '确定',
                confirmButtonClass: 'messageButColor',
                showClose: false,
              })
                .then(() => {
                  this.$router.push({
                    path: '/home/project/projectDeclareList',
                    name: 'projectDeclareList',
                    query: {
                      type: 'projectDeclareList',
                    },
                  })
                  this.$store.commit('CHANGE_SLIDER_NAME', {
                    oldUrl: '/home/project/projectDeclareList',
                    newUrl: this.$router.currentRoute.fullPath,
                  })
                })
                .catch(() => {})
            }
            this.getDetail(this.projectId)
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: resp.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((resp) => {
          this.$message.error('数据获取失败')
        })
    },

    getProjects2() {
      this.axios({
        method: 'post',
        url: 'api-p/projectcompany/expand/current/projects',
        data: {},
      })
        .then((resp) => {
          if (!resp.data.hasError) {
            this.projects = resp.data.result
            if (this.projects.length > 0) {
              //项目详情-工伤保险跳转进入工伤保险列表
              this.projectId = this.$route.query.projectId
                ? this.$route.query.projectId
                : this.projects[0].code
              this.projectName = this.$route.query.projectName
              // 小项目规则  项目端调用
              if (
                this.userType == 'PROJECT_ADMINISTRATOR' ||
                this.userType == 'LABOR_ADMINISTRATOR'
              ) {
                this.getSamllProject(this.projectId)
              }
            }
            this.getDetail(this.projectId)
          } else {
            this.$message({
              showClose: true,
              duration: 3000,
              message: resp.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((resp) => {
          this.$message.error('数据获取失败')
        })
    },
    // 判断是否是小项目
    getSamllProject(projectId) {
      this.axios({
        method: 'post',
        url: 'api-p/project/expand/findMiniProInsConfig',
        data: {
          projectId: projectId,
        },
      })
        .then((response) => {
          if (response.data.result == 'false') {
            this.isSamllProject = false
          } else {
            this.isSamllProject = true
          }
        })
        .catch((error) => {})
    },
    // 历史记录
    goHistory() {
      this.historyRecords = true
    },
    // 返回小项目提示
    goBack() {
      this.historyRecords = false
    },
  },
}
</script>

<style lang="less" scoped>
.topSection {
  background: #fff;
  border-radius: 4px 4px 0 0;
  padding: 16px 24px 16px 10px;
  height: 64px;
  .topBox {
    line-height: 30px;
    height: 30px;
    /deep/.el-input__inner {
      width: 346px;
      font-size: 22px;
      font-weight: bold;
      color: #333333;
      border: none;
      height: 30px;
      // background: #E4EBF1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    /deep/.el-select__caret {
      color: #333;
      font-size: 20px;
      line-height: 30px;
    }
  }
  /deep/.commonTab {
    margin-top: 21px;
  }
  /deep/.is-active {
    background: #fff;
  }
}

/* 开工状态 */
.startStatus {
  vertical-align: text-bottom;
  display: inline-block;
  width: 48px;
  height: 20px;
  line-height: 20px;
  background: #009588;
  color: #fff;
  text-align: center;
  font-size: 12px;
}
.StartOver {
  background: #657282;
}
.noStart {
  background: #ffc100;
}
.startStop {
  background: #d9544f;
}
.saveBtn {
  margin-right: 24px;
  margin-top: 15.5px;
}

.mainCon {
  top: 130px;
  padding: 0;
  background-color: #f5f7fa;
}

.opetareText {
  cursor: pointer;
}

.smallPro {
  width: 470px;
  height: 136px;
  background: rgba(151, 182, 217, 0.1);
  border: 1px solid rgba(164, 186, 215, 1);
  border-radius: 4px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  .smallProBox {
    display: flex;
    align-items: center;
    justify-content: fLex-start;
    height: 136px;
    padding-left: 44px;
    div {
      p {
        &:nth-of-type(1) {
          font-size: 20px;
          color: #0f90f9;
          font-weight: 700;
        }
        &:nth-of-type(2) {
          font-size: 16px;
          color: rgba(15, 144, 249, 0.8);
          font-weight: 500;
          margin-top: 4px;
        }
      }
    }
  }
}
</style>
